import React, { Component } from 'react';
/*
在大多数情况下，我们推荐使用 受控组件 来处理表单数据。
在一个受控组件中，表单数据是由 React 组件来管理的。
另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。
*/
// 实现表单的自动聚焦的例子
class App extends Component {
  constructor(props){
    super(props);
    // 1. 创建一个 ref
    this.inputRef = React.createRef();
  }
  // vue mounted
  componentDidMount(){
    //3. 通过focus 方法实现自动聚焦
    this.inputRef.current.focus();//input 自动聚焦
  }
  render() {
    return (
      <div>
        {/* 2.通过 ref 属性将 this.inputRef 对象和 input 表单绑定在一起*/}
        <input type="text" ref={this.inputRef} />
      </div>
    );
  }
}

export default App;
